<template>
	<view class="personal">
		<view class="box" v-if="profile.userId">
			<!-- 个人信息栏 -->
			<view class="personal-info" :style="{backgroundImage:'url(' + profile.backgroundUrl + ')'}">
				<view class="personal-info-left">
					<image v-if="!profile.avatarUrl" src="../../static/missing-face.png" mode=""></image>
					<image v-else :src="profile.avatarUrl" mode=""></image>
				</view>
				<view class="personal-info-right">
					<text class="name">{{profile.nickname}}</text>
					<view class="members">
						<image v-if="profile.vipType !==0" src="../../static/huiyuan.png" mode=""></image>
						<view class="level">
							Lv.{{level}}
						</view>
					</view>
				</view>


			</view>

			<!-- 关注、粉丝、等级 -->
			<view class="follows">
				<view @click="fensiFlag()">
					<text>{{profile.followeds}}</text>
					<span>粉丝</span>
				</view>
				<view @click="guanzhuFlag()">
					<text>{{profile.follows}}</text>
					<span>关注</span>
				</view>
				<view>
					<text>{{level}}</text>
					<span>等级</span>
				</view>
			</view>

			<!-- 基本信息 -->
			<view class="baseInfo">
				<view class="name">
					基本信息
				</view>


				<!-- 个人信息 -->
				<view class="baseInfo-personal">
					<view class="baseInfo-personal-item">
						<view>
							<view>村龄：</view>
							<view>{{cunAge}}年&nbsp;({{createTime}}注册)</view>
						</view>
						<view>
							<view>年龄：</view>
							<view>{{hou}}后 &nbsp;{{xingzuo}}</view>
						</view>
						<view>
							<view>性别：</view>
							<!-- {{profile.gender}} -->
							<view v-if="profile.gender==1">男</view>
							<view v-if="profile.gender==2">女</view>
						</view>
						<view>
							<view>
								累计听歌：
							</view>
							<view>
								{{listenSongs}}首
							</view>
						</view>
						<view class="signature">
							<view>
								个人简介
							</view>
							<view v-if="profile.signature==''">
								未填写
							</view>
							<view v-else>
								{{profile.signature}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 听歌排行 -->
			<view class="songPaihang">
				<view class="name">
					听歌排行
				</view>
				<view class="content">
					<scroll-view scroll-y="true" class="content-scroll">
						<view class="item one-lint-hidden" v-for="item in songPaihang" :key="item.song.id"
							@click="paihangToSong(item.song.id)">{{item.song.name}}
							<text>-{{item.song.ar[0].name}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 关注 和 粉丝 列表 -->
		<uni-popup ref="follows" type="bottom">
			<scroll-view v-if="flag==='fensi'" scroll-y="true" class="follows-scroll follows-scroll-fensi">
				
				<view class="follows-scroll--fensi-item" v-for="item in fensi" :key="item.userId">
					<view class="img">
						<image :src="item.avatarUrl" mode=""></image>
					</view>
					<!-- 名称 个人简介 -->
					<view class="info">
						<view class="name one-lint-hidden">
							{{item.nickname}}
						</view>
						<view class="signature one-lint-hidden">
							{{item.signature === null ? '' : item.signature}}
						</view>
					</view>
					<!-- 关注和 互相关注 -->
					<view class="box">
						<view v-if="item.followed === false" class="huiguan" >
							回关
							<!-- {{item.followed}} -->
						</view>
						<view v-else class="huxiangguanzhu">
							互相关注
						</view>
					</view>
				</view>
			</scroll-view>
			
			
			<!-- 关注 -->
			<scroll-view v-else scroll-y="true" class="follows-scroll follows-scroll-guanzhu">
				<view class="follows-scroll-guanzhu-item" v-for="item in guanzhu" :key="item.userId">
					<view class="img">
						<image :src="item.avatarUrl" mode=""></image>
					</view>
					<!-- 名称 个人简介 -->
					<view class="info">
						<view class="name one-lint-hidden">
							{{item.nickname}}
						</view>
						<view class="signature one-lint-hidden">
							{{item.signature === null ? '' : item.signature}}
						</view>
					</view>
					
				</view>
			</scroll-view>

		</uni-popup>
	</view>
</template>
<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				profile: {}, // 用户信息
				createTime: '', // 注册日期
				cunAge: 0, // 村岭
				hou: 0, // 几几后
				birthday: '', // 生日
				xingzuo: '', // 星座
				songPaihang: [],
				fensi: [], //粉丝 的 详情列表
				guanzhu: [], //关注的列表
				flag:'',// 判断点击的到底是关注还是粉丝

			}
		},
		options: { styleIsolation: 'shared' },
		onLoad() {
			// 获取用户 基本信息
			console.log('本地存储获取到了', uni.getStorageSync('profile'));
			this.profile = uni.getStorageSync('profile')
			// 判断有没有登录
			if (!this.profile.userId) {
				uni.showModal({
					title: '登录',
					content: '不好意思，您未登录，点击确定，为您跳转到登录页',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.reLaunch({
								url: '../../subPackages/pages/login/login',
								success() {
									console.log('跳转成功');
								}
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				});
			} else {
				this.getUserInfo(this.profile.userId)
				// 获取 听歌排行榜
				this.getSongsPaihang(this.profile.userId)
				// 获取粉丝
				this.getFensi(this.profile.userId)
				// 获取关注
				this.getGuanzhu(this.profile.userId)
			}

		},
		computed: {
			// 等级
			level() {
				console.log('发生了变化');

				return this.profile.level
			},
			// 听过多少首歌曲
			listenSongs() {
				return this.profile.listenSongs
			},
			

		},
		methods: {
			async getUserInfo(id) {
				let {
					data
				} = await uni.$request('get', '/user/detail', {
					uid: id
				})
				if (data.code === 200) {
					console.log('准备添加用户信息');

					this.$set(this.profile, "level", data.level)
					// 用户等级
					// this.profile.level = data.level
					// 听过多少首歌曲
					this.profile.listenSongs = data.listenSongs
					// 创建时间
					this.profile.createTime = data.createTime
					// 创建天数
					this.profile.createDays = data.createDays
					console.log(this.profile);

					// 村凌
					this.createTime = moment(this.profile.createTime).format('YYYY年M月DD日')
					this.birthday = moment(this.profile.birthday).format('YYYY年MM月DD日')
					this.cunAge = moment().format('YYYY') - 1 - this.createTime.substr(0, 4)
					this.hou = this.birthday.substr(2, 2)
					this.xingzuo = uni.$utils.xingzuo(this.birthday.substr(5, 2), this.birthday.substr(8, 2))

				} else {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'error'
					})
				}
			},
			// 获取 听歌 排行
			async getSongsPaihang(id) {
				let {
					data
				} = await uni.$request('get', '/user/record', {
					type: 0,
					uid: id
				})
				this.songPaihang = data.allData.slice(0, 20)
				console.log(data.allData);
			},
			paihangToSong(id) {
				uni.navigateTo({
					url: '/subPackages/pages/songPlay/songPlay?id=' + id,

				})
			},
			open() {
				this.$refs.follows.open('bottom')
			},
			fensiFlag(){
				this.flag='fensi'
				this.open()
			},
			guanzhuFlag(){
				this.flag='guanzhu'
				this.open()				
			},
			// 获取用户 粉丝
			async getFensi(id) {
				let {
					data
				} = await uni.$request('get', '/user/followeds', {
					limit: 100,
					uid: id
				})
				if (data.code === 200) {
					this.fensi = data.followeds
				}
				console.log(data);
			},
			// 获取关注
			async getGuanzhu(id){
				
				let {
					data
				} = await uni.$request('get', '/user/follows', {
					limit: 100,
					uid: id
				})
				if (data.code === 200) {
					this.guanzhu = data.follow
				}
				console.log(data);
			},



		},
	}
</script>

<style lang="less" scoped>
	.personal {
		// height: 100vh;
		background-color: #f1f1f1;
		padding: 20rpx;
		// margin-bottom: 40rpx;

		// 个人信息栏
		.personal-info {
			padding: 20rpx;
			height: 129rpx;
			background-color: #fff;
			// background-image: url('https://z3.ax1x.com/2021/09/06/hfgPP0.jpg');
			// background-image: url('https://z3.ax1x.com/2021/09/06/hfgNdA.jpg');
			background-size: auto;
			background-repeat: no-repeat;
			background-position: center;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			display: flex;
			color: #fff;

			.personal-info-left {
				image {
					border-radius: 50%;
					width: 120rpx;
					height: 120rpx;
				}

				margin-right: 20rpx;
			}

			.personal-info-right {

				.name {
					font-size: 40rpx;
					font-weight: bold;
				}

				.members {
					padding-top: 10rpx;
					display: flex;
					height: 40rpx;
					align-items: center;

					image {
						// 回复评论的时候  的大小
						// width: 70rpx;
						// height: 24rpx;

						width: 90rpx;
						height: 37rpx;

					}

					.level {
						margin-left: 10rpx;
						padding: 0 10rpx;
						background-color: #fff;
						border-radius: 20rpx;
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}

		// 关注、粉丝、等级
		.follows {
			display: flex;
			height: 100rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			>view {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				height: 100rpx;
				width: 100%;

				text {
					width: 100%;
					height: 50rpx;
					color: #000000;
					font-size: 30rpx;
					font-weight: bold;
					flex: 1;
					text-align: center;
					line-height: 50rpx;
				}

				span {
					width: 100%;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					flex: 1;
					// color: #f1f1f1;
					color: #333;
					font-size: 26rpx;
				}
			}
		}

		// 基本信息栏
		.baseInfo {
			margin-top: 40rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			// height: 200rpx;

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}


			// 个人信息
			.baseInfo-personal {
				.baseInfo-personal-item {
					>view {
						display: flex;
						height: 60rpx;

						>view {
							&:nth-child(1) {
								color: #777;
							}

							&:nth-child(2) {
								color: #333;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
		}

		// 听歌排行
		.songPaihang {
			margin-top: 40rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 20rpx;

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}

			.content {
				.content-scroll {
					height: 1000rpx;

					.item {
						height: 80rpx;
						// background-color: red;
						line-height: 80rpx;
						border-bottom: 1px solid #cccccc;

						text {
							color: #cccccc;
							font-size: 26rpx;
						}
					}
				}
			}
		}


		/deep/.uni-popup__wrapper {
			height: 78vh !important;
			background-color: #FFFFFF !important;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			padding: 20rpx;
		}

		// 评论 粉丝列表 弹框
		.follows-scroll {
			height: 78vh;
			// background-color: #4CD964;
		}

		// 粉丝的
		.follows-scroll-fensi {

			// height: 80rpx;
			// display: flex;
			.follows-scroll--fensi-item {
				height: 120rpx;
				margin-bottom: 30rpx;
				display: flex;

				.img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}

				.info {
					margin-left: 20rpx;
					display: flex;
					width: 410rpx;
					height: 100%;
					flex-direction: column;
					justify-content: center;

					// align-items: center;
					>view {
						flex: 1;

						&:nth-child(1) {
							display: flex;
							align-items: center;
						}

						&:nth-child(2) {
							color: #666666;
							font-size: 26rpx;
						}
					}
				}

				.box {
					display: flex;
					justify-content: center;
					align-items: center;

					.huiguan {
						font-size: 26rpx;
						color: #d43c33;
						border: 1px solid #d43c33;
						border-radius: 30rpx;
						padding: 0 20rpx;
						align-items: center;
						height: 40rpx;
						line-height: 40rpx;
					}

					.huxiangguanzhu {
						font-size: 26rpx;
						color: #666666;
						border: 1px solid #666666;
						border-radius: 30rpx;
						padding: 0 20rpx;
						align-items: center;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}
			
			
			


		}
		// 关注的
		.follows-scroll-guanzhu{
			.follows-scroll-guanzhu-item{
				height: 120rpx;
				margin-bottom: 30rpx;
				display: flex;
				
				.img {
					width: 120rpx;
					height: 120rpx;
				
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}
				
				.info {
					margin-left: 20rpx;
					display: flex;
					width: 410rpx;
					height: 100%;
					flex-direction: column;
					justify-content: center;
				
					// align-items: center;
					>view {
						flex: 1;
				
						&:nth-child(1) {
							display: flex;
							align-items: center;
						}
				
						&:nth-child(2) {
							color: #666666;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>
